<template>
  <view class="container">
    <!--  搜索框  -->
    <view class="search-container">
      <view class="input-container">
        <wd-input
            v-model="searchValue"
            type="text"
            placeholder="搜索"
            custom-class="custom-search-input-class"
            :no-border="true"
        />
      </view>
      <view class="search-btn-container" @click="handleSearch">
        <wd-icon name="search" size="22px" color="#ffffff"></wd-icon>
      </view>
    </view>
    <!--  宣传轮播图  -->
    <view class="swiper-container">
      <wd-swiper
          :list="swiperList"
          autoplay
          value-key="imgUrl"
          height="189"
      >
      </wd-swiper>
    </view>
    <!--  热门景区 Title  -->
    <view class="hot-scenic-spot-title-container">
      <image
          class="img"
          src="http://img.jowong.com/aba/2025-03-22/组 2(1)_1742625127910.png"
          lazy-load
      ></image>
      <view class="more-container" @click="handleNavHotScenicSpot">
        <text>查看更多</text>
        <view class="more-icon-container">
          <wd-icon name="arrow-right" size="10px" color="#ffffff"></wd-icon>
        </view>
      </view>
    </view>
    <!--  热门景区列表  -->
    <view class="hot-scenic-spot-list-container">
      <view
          v-if="settingLoading"
          class="hot-scenic-spot-item-container"
          v-for="(item,index) in hotScenicSpotList"
          :key="index"
          @click="handleNavPage(item)"
      >
        <image class="scenic-spot-img" :src="item.headImageUrl" lazy-load></image>
        <view class="scenic-spot-info-container">
          <view class="more-icon-container">
            <wd-icon name="arrow-right" size="10px" color="#ffffff"></wd-icon>
          </view>
          <view class="scenic-spot-container">{{item.name}}</view>
          <view class="distant-container">
            <image class="location-img" src="http://img.jowong.com/aba/2025-03-22/spiritling-dingwei_1742630349860.png" lazy-load></image>
            <text>{{distanceTransform(item.distance)}} KM</text>
          </view>
        </view>
      </view>
      <view
          v-else
          style="width: 333rpx;height: 166rpx;display: flex;flex-wrap: wrap;margin-bottom: 16rpx"
          v-for="(item,index) in 4"
      >
        <wd-skeleton
            animation="gradient" theme="paragraph"
            :row-col="[{ width: '333rpx',height:'166rpx', type: 'rect'}]"
        />
      </view>
    </view>
    <!--  旅游地图  -->
    <view class="travel-map-container">
      <image class="travel-map-img" src="http://img.jowong.com/aba/2025-03-22/未标题-1(1)_1742631412845.png"></image>
    </view>
    <!--  为你推荐 img  -->
    <view class="recommend-icon-container">
      <image class="recommend-icon" src="http://img.jowong.com/aba/2025-03-22/组 2_1742631985417.png" lazy-load></image>
    </view>
    <!--  为你推荐景区列表  -->
    <view class="recommend-scenic-spot-list-container">
      <ScenicSpotItem
        v-for="(item,index) in recommendScenicSpotList"
        :key="index"
        :recommendScenicSpotItem="item"
      ></ScenicSpotItem>
    </view>
  </view>
</template>

<script setup>
  import {ref} from 'vue';
  import {storeToRefs} from "pinia";
  import {styleSettingContent} from "@/api/system";
  import ScenicSpotItem from "@/ticketSubPack/components/scenicSpotItem/index.vue";
  import {hotScenicSpot, recommendScenicSpot, scenicSpotMiniPrice} from "@/api/ticket";
  import {useMixin} from "@/hook/useMixin";

  const {distanceTransform} = useMixin();

  const settingLoading = ref(true);
  const swiperList = ref([]);
  const hotScenicSpotList = ref([]);
  const recommendScenicSpotList = ref([]);
  const searchValue = ref("");
  const latitude = ref("");
  const longitude = ref("");

  const searchScenicSpotTicketSetting = async () => {
    settingLoading.value = false;
    try {
      const {result} = await styleSettingContent({codes:"HOT_SCENIC_SPOT"});
      let {
        HOT_SCENIC_SPOT = []
      } = result;
	  swiperList.value = HOT_SCENIC_SPOT
    } catch (error) {
      console.log(error,'获取景区门票配置失败')
    } finally {
      settingLoading.value = true;
    }
  }
  const handleNavHotScenicSpot = () => {
    let excludeProviderIdList = encodeURIComponent(JSON.stringify(hotScenicSpotList.value.map(item => item.id)));
    console.log(excludeProviderIdList,'excludeProviderIdList');
    uni.navigateTo({
      url: `/ticketSubPack/pages/hotScenicSpotList/index?excludeProviderIdList=${excludeProviderIdList}`
    })
  };
  const handleSearch = () => {
    if(!searchValue.value) {
      uni.showModal({
        title: "提示",
        content: "请输入搜索内容",
        icon: "none",
        showCancel: false
      })
      return;
    }
    uni.navigateTo({
      url: `/ticketSubPack/pages/ticketScenicSpotSearch/index?searchValue=${searchValue.value}`
    })
  };
  const queryHotScenicSpotList = async() => {
    await hotScenicSpot({lnt:longitude.value,lat:latitude.value}).then(res => {
      hotScenicSpotList.value = res.result;
    });
  };
  const queryRecommendScenicSpotList = async() => {
    await recommendScenicSpot({lnt:longitude.value,lat:latitude.value}).then(res => {
      recommendScenicSpotList.value = res.result;
    });
  };
  /*
  * 查询服务商最低价格
  * ids: Array  服务商 Id 列表集合
  * */
  const queryScenicSpotMiniPrice = async () => {
    let idList = recommendScenicSpotList.value.map(item =>  item.id);
    await scenicSpotMiniPrice({ids:idList}).then(res => {
      let {result} = res;
      result.forEach((item,index) => {
        recommendScenicSpotList.value.forEach((scenicSpotItem) => {
          if(item.id === scenicSpotItem.id) {
            scenicSpotItem.price = item.price;
          }
        })
      })
    }).catch(err => {
      console.log(err,'err-queryScenicSpotMiniPrice')
    });
  };
  const handleNavPage = (item) => {
    let {id,name} = item;
    uni.navigateTo({
      url: `/ticketSubPack/pages/scenicSpotDetail/index?id=${id}&name=${name}`
    })
  };

  onLoad(async () => {
    const {locationInfo} = useStore('app');
    if(!locationInfo.value.latitude || !locationInfo.value.longitude) {
      let {latitude:_latitude,longitude:_longitude} = uni.getStorageSync('locationInfo');
      latitude.value = _latitude;
      longitude.value = _longitude;
    }else {
      let {latitude:_latitude,longitude:_longitude} = locationInfo.value;
      latitude.value = _latitude;
      longitude.value = _longitude;
    }
    await searchScenicSpotTicketSetting();
    await queryHotScenicSpotList();
    await queryRecommendScenicSpotList();
    await queryScenicSpotMiniPrice();
  });
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: #fdffeb;
    padding:60rpx 20rpx;

    .search-container{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 69rpx;
      border-radius: 34rpx;
      overflow: hidden;
      background-color: #FDFFEB;
      border: 2rpx solid #508963;
      box-shadow: -3rpx -1rpx 5rpx 0rpx rgba(0,0,0,0.17);
      .input-container{
        width: 80%;
        :deep(.custom-search-input-class) {
          background: #feffea;
          height: 69rpx;
          width: 100%;
          .wd-input__body {
            height: 69rpx;
            .wd-input__value{
              height: 100%;
              padding-left: 20rpx;
            }
          }
        }
      }
      .search-btn-container{
        flex: 1;
        border-top-left-radius: 35rpx;
        border-bottom-left-radius: 35rpx;
        text-align: center;
        background: #508963;
        height: 69rpx;
        line-height: 69rpx;
      }
    }

    .swiper-container{
      margin: 50rpx 0;
    }

    .hot-scenic-spot-title-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      image {
        width: 229rpx;
        height: 44rpx;
      }
      .more-container {
        display: flex;
        align-items: center;
        text {
          font-size: 30rpx;
          font-weight: bold;
        }
      }

    }

    .hot-scenic-spot-list-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 50rpx;

      .hot-scenic-spot-item-container {
        display: flex;
        height: 166.5rpx;
        width: calc(50vw - 36rpx);
        border-radius: 10rpx;
        margin-bottom: 16.6rpx;
        overflow: hidden;
        background-color: #eef0df;
        .scenic-spot-img {
          width: 166.5rpx;
          height: 166.5rpx;
          background-size: cover;
        }
        .scenic-spot-info-container {
          flex: 1;
          .more-icon-container {
            margin-left: 77%;
            margin-top: 20rpx;
          }
          .scenic-spot-container {
            font-weight: bold;
            color: #2B2B24;
            font-size: 29rpx;
            margin-top: 15rpx;
            padding-left: 14rpx;
            height: 36rpx;
            width: 160rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .distant-container {
            padding-left: 14rpx;
            margin-top: 20rpx;
            .location-img {
              width: 20rpx;
              height: 24rpx;
              margin-right: 7rpx;
            }
            text {
              font-size: 22rpx;
              color: #2B2B24;
            }
          }
        }
      }
    }

    .travel-map-container {
      height: 80rpx;
      margin: 24rpx 0 82.4rpx 0;
      .travel-map-img {
        width: 100%;
        height: 100%;
        background-size: cover;
      }
    }

    .recommend-icon-container {
      .recommend-icon {
        width: 230rpx;
        height: 45rpx;
        margin-bottom: 51.5rpx;
        background-size: cover;
      }
    }

    .recommend-scenic-spot-list-container {

    }

    .more-icon-container {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #508963;
      border-radius: 50%;
      width: 25rpx;
      height: 25rpx;
      margin-left: 13rpx;
      text-align: center;
    }
  }
</style>
